<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/base.css">
</head>
<body>
    <div id="app">
        <pre v-pre class="note">
        可控监视器定义(实例手动构建监视器)
            + vue语法环境为vue的实例对象提供 $watch 方法，该方法可以手动完成监视器定义
                  let 关闭方法 = vm.$watch(被控变量名|返回了控制变量的方法,监控回调方法,配置选项)
        </pre>
        <input type="button" value="printThis" @click="printThis()">
        <p>msg:{{ msg }}</p>
        <input v-model="msg" type="text" />
        <p>info:{{ info }}</p>
        <input v-model="info" type="text" />
        <input type="button" value="info(开启|关闭)监视器" @click="openOrCloseInfoWatcher()">
        <p>arr:{{ arr }}</p>
        <ul>
            <li v-for="(item,i) in arr">
                <input v-model="arr[i]" type="text" />
            </li>
        </ul>
        <input type="button" value="resetArr" @click="arr=[11,22,33,44,55]">
        <br>
        <input type="button" value="arr(开启|关闭)监视器" @click="openOrCloseArrWatcher()">
        <p>user:{{ user }}</p>
        <input v-model="user.name" type="text" />
        <input type="button" value="user.name(开启|关闭)监视器" @click="openOrCloseUserNameWatcher()">

    </div>
    <script type="module">
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data() {
                return {
                    test:"仓库变量",
                    msg:"msg",
                    info:"info",
                    // unInfoWatch:null
                    arr:[1,2,3,4],
                    user:{
                        name:"tom",
                        age:23
                    }
                }
            },
            watch: {
                msg(newValue, oldValue) {
                    console.log("msg 数据发生改变")
                },
            },
            methods: {
                printThis(){
                    /*
                        + vue的实例对象本身也是对象数据，所以是可以完成新属性的手动增加的；
                        + vue的响应式变量需要被定义在数据仓库中的目的，是希望vue完成数据劫持，实现响应式功能
                        + 所以如果需要基于vue实例完成变量的临时中转和记录，可以直接为vue实例添加新的普通属性完成
                        + vue建议实例手动增加的属性和方法已 $ 名称开头，用于区分响应式数据变量，实例方法等
                    */
                    console.log(this)
                },
                openOrCloseInfoWatcher() {
                    // console.log(this.$watch)
                    // let unInfoWatch = this.$watch("info",function(){
                    //     console.log("info被修改")
                    // })
                    if(this.$unInfoWatch){
                        this.$unInfoWatch();
                        this.$unInfoWatch = null;
                    }else{
                        // this.$unInfoWatch = this.$watch("info",function(){
                        //     console.log("info被修改")
                        //     // $watch 开启监视器时，回调的方法this始终都是vue实例
                        //     console.log("仓库数据test,",this.test)
                        // })
                        this.$unInfoWatch = this.$watch(function(){
                            return this.info;
                        },function(){
                            console.log("info被修改")
                            // $watch 开启监视器时，回调的方法this始终都是vue实例
                            console.log("仓库数据test,",this.test)
                        })
                        // console.log(unInfoWatch)
                    }
                },
                openOrCloseArrWatcher(){
                    if(this.$unArrWatch){
                        this.$unArrWatch();
                        this.$unArrWatch = null;
                    }else{
                        // this.$unArrWatch = this.$watch(
                        //     "arr",
                        //     ()=>{
                        //         console.log("arr被修改")
                        //         console.log("仓库数据test,",this.test)
                        //     },
                        //     {
                        //         deep:true
                        //     }
                        // )
                        this.$unArrWatch = this.$watch(
                            ()=>{ return this.arr },
                            ()=>{
                                console.log("arr被修改")
                                console.log("仓库数据test,",this.test)
                            },
                            {
                                deep:true
                            }
                        )
                    }
                },
                openOrCloseUserNameWatcher(){
                    if(this.$unUserNameWatch){
                        this.$unUserNameWatch();
                        this.$unUserNameWatch = null;
                    }else{
                        // this.$unUserNameWatch = this.$watch("user.name",()=>{
                        //     console.log("user.name被修改")
                        // })
                        this.$unUserNameWatch = this.$watch(()=>{
                            return this.user.name
                        },()=>{
                            console.log("user.name被修改")
                        })
                    }
                }
            },
        }).mount("#app")
    </script>
</body>
</html>